<template>
  <div class="aging-test-add">
    <el-card class="add-card">
      <template #header>
        <div class="card-header">
          <h2>老化测试任务执行界面</h2>
        </div>
      </template>

      <el-form :model="formData" :rules="rules" ref="formRef" label-width="140px" class="aging-test-form">

        <el-form-item label="产品类型:" prop="productType">
          <el-select v-model="formData.productName" placeholder="请选择产品类型" clearable filterable>
            <el-option label="LED灯泡" value="LED灯泡"></el-option>
            <el-option label="LED灯管" value="LED灯管"></el-option>
            <el-option label="LED面板灯" value="LED面板灯"></el-option>
            <el-option label="LED射灯" value="LED射灯"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="测试开始时间:" prop="startTime">
          <el-date-picker v-model="formData.startTime" type="datetime" placeholder="选择日期时间"
            style="width: 100%" format="YYYY/MM/DD HH:mm"></el-date-picker>
        </el-form-item>

        <el-form-item label="测试时长:" prop="duration">
          <el-input v-model="formData.duration" placeholder="请输入测试时长（小时）">
            <template #append>小时</template>
          </el-input>
        </el-form-item>

        <el-form-item label="输入电压(V):" prop="voltage">
          <el-input v-model="formData.voltage" placeholder="请输入电压">
            <template #append>V</template>
          </el-input>
        </el-form-item>

        <el-form-item label="输入温度(℃):" prop="temperature">
          <el-input v-model="formData.temperature" placeholder="请输入温度">
            <template #append>℃</template>
          </el-input>
        </el-form-item>

        <el-form-item label="光衰结果(%):" prop="lightDecay">
          <el-tooltip content="未测试完成可以先不填" placement="top" effect="dark">
            <el-input v-model="formData.lumenDepreciation" placeholder="请输入光衰结果">
              <template #append>%</template>
            </el-input>
          </el-tooltip>
        </el-form-item>

        <el-form-item label="备注说明:" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" :rows="4" placeholder="请输入备注说明"></el-input>
        </el-form-item>

        <el-form-item class="form-buttons">
          <el-button type="success" @click="submitTestResult">提交测试</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { addAgingTestService } from '@/api/InspectApi'


const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive({
  productName: '',
  duration: '',
  voltage: '',
  temperature: '',
  lumenDepreciation: '',
  remarks: '',
  startTime: ''
})

// 表单验证规则
const rules = {
  duration: [
    { required: true, message: '请输入测试时长', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
  ],
  voltage: [
    { required: true, message: '请输入电压', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
  ],
  temperature: [
    { required: true, message: '请输入温度', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
  ],
  lumenDepreciation: [
    { required: false },
    { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
  ],
}


// 提交测试结果
const submitTestResult = async () => {
  // 格式化日期时间
  const submitData = { ...formData }
  if (submitData.startTime) {
    const date = new Date(submitData.startTime)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    submitData.startTime = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`
  }
  
  let result = await addAgingTestService(submitData)
  ElMessage.success(result?.data?.message || '添加成功')
  clearFormData()
}

//清空表格
const clearFormData = () => {
  formData.productName = ''
  formData.duration = ''
  formData.voltage = ''
  formData.temperature = ''
  formData.lumenDepreciation = ''
  formData.remarks = ''
  formData.startTime = ''
}

</script>

<style lang="scss" scoped>
.aging-test-add {
  padding: 0;
  background-color: #f5f5f5;

  .add-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .aging-test-form {
      max-width: 800px;
      margin: 0 auto;

      .upload-item {
        :deep(.el-form-item__content) {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }

      .form-buttons {
        margin-top: 30px;
        display: flex;
        justify-content: center;

        :deep(.el-form-item__content) {
          margin-left: 0 !important;
          justify-content: center;
          gap: 20px;
        }
      }
    }
  }
}
</style>